<script setup lang="ts">
// import { getHomeGoodsGuessLikeAPI } from '@/services/home'
// import type { PageParams } from '@/types/global'
import { onHide, onLoad, onShow } from '@dcloudio/uni-app'
// import type { GuessItem } from '@/types/home'
import { onMounted, ref, watch, defineEmits, defineExpose, defineProps } from 'vue'
import { useI18n } from 'vue-i18n'
const { t, locale } = useI18n()
const emit = defineEmits(['dayNotify'])
let props = defineProps({
  type: {
    type: String,
    default: '',
  },
})
// 打开弹窗
const openDay = ref(false)
// 当前搜索的日期
const searchDayTxt = ref('')
// 当前一天
const cday = ref(new Date().getDate())
const cNext = ref()
// 今天
const tday = ref(new Date().getDate())

const curYear = ref()
const curMonth = ref()
// 月日期
const mounthDay = ref([])
// 分页参数
// const pageParams: Required<PageParams> = {
//   page: 1,
//   pageSize: 10,
// }
// 将一维数组转化为二维数组
const convertTo2DArray = (inputArray, columns) => {
  const rows = Math.ceil(inputArray.length / columns)
  let result = []
  for (let i = 0; i < rows; i++) {
    result.push(inputArray.slice(i * columns, (i + 1) * columns))
  }
  return result
}
const getCurrentWeeklyCalendar = () => {
  const today = new Date()
  const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1)
  const firstDayOfWeek = firstDayOfMonth.getDay()
  const daysInMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0).getDate()
  const daysInWeek = 7

  let currentWeekStart = new Date(firstDayOfMonth)
  let currentWeekEnd = new Date(firstDayOfMonth)

  // 计算当前周的开始和结束日期
  currentWeekStart.setDate(currentWeekStart.getDate() - firstDayOfWeek + 1)
  currentWeekEnd.setDate(
    currentWeekEnd.getDate() + ((daysInWeek - firstDayOfWeek) % daysInWeek) - 1,
  )

  let year = today.getFullYear()
  let month = today.getMonth() + 1 // 月份是从1开始的
  let day = today.getDate()
  let daysInMonth11 = new Date(year, month, 0).getDate()
  let todayTxt = year + '/' + month + '/' + day
  // 创建一个二维数组表示周视图
  let weeklyCalendar = []

  // 填充空白天 0 1 2 3 4 5 6
  let startEmpty = currentWeekStart.getDay()
  // console.log(' - - - >  8 8 8 : ', startEmpty)
  for (let i = 0; i <= startEmpty; i++) {
    weeklyCalendar.push('')
  }
  for (let i = 0; i < daysInMonth; i++) {
    weeklyCalendar.push(i + 1)
  }
  let wArr = convertTo2DArray(weeklyCalendar, 7)
  // console.log(
  //   ' - - - >  9 9 9 : ',
  //   wArr,
  //   '88:',
  //   currentWeekStart.getDate(),
  //   currentWeekStart.getDay(),
  //   '99:',
  //   currentWeekEnd,
  //   ':',
  //   today,
  //   day,
  // )
  return {
    mounth: wArr,
    today: today,
    day: day,
    todayTxt: todayTxt,
    year: year,
    month: month,
  }
}
// 上一天
const previousDay = () => {
  let cc = cday.value - 1
  if (cc < 1) {
    return
  }
  cday.value = cc
  if (props.type == 'one') {
    emit('dayNotify', {
      cday: curYear.value + '/' + curMonth.value + '/' + cday.value,
    })
    return
  }
  emit('dayNotify', {
    cday: curYear.value + '/' + curMonth.value + '/' + cday.value,
    cNext: curYear.value + '/' + curMonth.value + '/' + cNext.value,
  })
}
// 下一天
const nextDay = () => {
  let cc = null
  if (props?.type == 'one') {
    cc = cday.value + 1
    cNext.value = cc
    emit('dayNotify', {
      cday: curYear.value + '/' + curMonth.value + '/' + cday.value,
    })
    return
  }

  if (cNext.value) {
    cc = cNext.value + 1
  } else {
    cc = cday.value + 1
  }
  //大于今天
  if (cc > tday.value) {
    return
  }
  if (cNext.value && cc > cNext.value) {
    cNext.value = cc
  }
  if (!cNext.value) {
    cday.value = cc
  }
  emit('dayNotify', {
    cday: curYear.value + '/' + curMonth.value + '/' + cday.value,
    cNext: curYear.value + '/' + curMonth.value + '/' + cNext.value,
  })
}
const oneDay = (d) => {
  if (tday.value < d) {
    return
  }

  if (props?.type == 'one') {
    cday.value = d
    emit('dayNotify', {
      cday: curYear.value + '/' + curMonth.value + '/' + cday.value,
    })
    return
  }

  if (d == cday.value) {
    // 点击同一天
    cday.value = d
    cNext.value = null
  }
  if (d == cNext.value) {
    // 点击同一天
    cday.value = d
    cNext.value = null
  }
  if (cday.value < d) {
    // 不同一天
    cNext.value = d
  } else if (d < cday.value) {
    cNext.value = cday.value
    cday.value = d
  }
  emit('dayNotify', {
    cday: curYear.value + '/' + curMonth.value + '/' + cday.value,
    cNext: curYear.value + '/' + curMonth.value + '/' + cNext.value,
  })
}
//
const openDayCb = () => {
  openDay.value = openDay.value ? false : true
}
watch([cday, cNext], (newValue, oldValue) => {
  if (cday.value == cNext.value) {
    return (searchDayTxt.value = curYear.value + '/' + curMonth.value + '/' + cday.value)
  }
  searchDayTxt.value =
    curYear.value +
    '/' +
    curMonth.value +
    '/' +
    cday.value +
    (cNext.value ? ' - ' + curYear.value + '/' + curMonth.value + '/' + cNext.value : '')
})
onShow(async () => {
  // uni.$emit('changeTabbarTxt')

  // 使用函数并展示结果
  const weeklyCalendar = getCurrentWeeklyCalendar()
  mounthDay.value = weeklyCalendar.mounth
  searchDayTxt.value = weeklyCalendar.todayTxt
  curYear.value = weeklyCalendar.year
  curMonth.value = weeklyCalendar.month
  // console.log(weeklyCalendar)
})
// 猜你喜欢的列表
// const guessList = ref<GuessItem[]>([])
// 已结束标记
// const finish = ref(false)
// 获取猜你喜欢数据
// const getHomeGoodsGuessLikeData = async () => {
//   // 退出分页判断
//   if (finish.value === true) {
//     return uni.showToast({ icon: 'none', title: t('no.more.data') + '~' })
//   }
//   const res = await getHomeGoodsGuessLikeAPI(pageParams)
//   // guessList.value = res.result.items
//   // 数组追加
//   guessList.value.push(...res.result.items)
//   // 分页条件
//   if (pageParams.page < res.result.pages) {
//     // 页码累加
//     pageParams.page++
//   } else {
//     finish.value = true
//   }
// }
// // 重置数据
// const resetData = () => {
//   pageParams.page = 1
//   guessList.value = []
//   finish.value = false
// }
// // 组件挂载完毕
// onMounted(() => {
//   getHomeGoodsGuessLikeData()
// })
// // 暴露方法
defineExpose({
  searchDayTxt,
})
</script>

<template>
  <view class="days-wrap">
    <view class="days-head flexR"
      ><view class="day-item day-previous" @click="previousDay">{{ t('previousday') }}</view>
      <view class="day-previous-txt">{{ searchDayTxt }}</view>
      <view class="day-item day-next" @click="nextDay">{{ t('dayafter') }}</view></view
    >
    <view class="week-wrap flexR">
      <view class="week-item">{{ t('Sun.') }}</view>
      <view class="week-item">{{ t('Mon.') }}</view>
      <view class="week-item">{{ t('Tues.') }}</view>
      <view class="week-item">{{ t('Wed.') }}</view>
      <view class="week-item">{{ t('Thurs.') }}</view>
      <view class="week-item">{{ t('fri') }}</view>
      <view class="week-item">{{ t('Sat.') }}</view>
    </view>
    <view class="lines-days flexC">
      <view class="week-day-line-bg"></view>
      <view class="weeks-w">
        <view class="week-day-line-" :key="'line' + wind" v-for="(week, wind) in mounthDay">
          <view v-if="openDay || week.includes(tday)" class="week-day-line flexR">
            <view class="day-one flexR" :key="day" v-for="day in week" @click="oneDay(day)">
              <view
                :class="[
                  'day-txt',
                  day == tday && 'todayI',
                  day == cday && 'activeI',
                  tday < day && 'next-day',
                  day == cNext && 'activeI',
                  cday < day && cNext && day < cNext && 'middleTxt',
                ]"
                >{{ day }}</view
              >
            </view>
          </view>
        </view>
        <view :class="['open-days-wrap flexR', openDay && 'openWeekBot']">
          <view class="open-days" @click="openDayCb"></view>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.days-wrap {
  width: 100%;
  background: #ffffff;
}
.day-one {
  height: 112rpx;
  text-align: center;
  width: 14.28%;
  line-height: 72rpx;
  height: 72rpx;
}
.days-head {
  justify-content: space-between;
  padding-left: 30rpx;
  padding-right: 30rpx;
  height: 104rpx;
  line-height: 104rpx;
}

.day-item {
}
.week-item {
  color: #07133b;
  text-align: center;
  font-family: 'PingFang SC';
  font-size: 28rpx;
  font-weight: 400;
  height: 40rpx;
  width: 14.28%;
}
.week-wrap {
  margin-left: 30rpx;
  margin-right: 30rpx;
  height: 80rpx;
  /* padding-left: 20rpx;
  padding-right: 14rpx; */
  justify-content: space-between;
}
.open-days-wrap {
  border-bottom: 1px solid #eaeaea;
}
.openWeekBot {
  box-shadow: 0 12px 24px 0 #0000001a;
}
.open-days {
  width: 50rpx;
  height: 8rpx;
  flex-shrink: 0;
  border-radius: 46rpx;
  background: #07133b33;
  margin-top: 10rpx;
  margin-bottom: 16rpx;
}
.lines-days {
  /* margin-left: 30rpx;
  margin-right: 30rpx; */
  position: relative;
  z-index: 4;
}
.week-day-line-bg {
  height: 152rpx;
  position: relative;
  z-index: 1;
}

.weeks-w {
  position: absolute;
  top: 0;
  left: 0rpx;
  right: 0rpx;
  /* padding-left: 30rpx;
  padding-right: 30rpx; */
  background: #ffffff;
  z-index: 2;
}
.week-day-line- {
  width: 100%;
  padding-left: 30rpx;
  padding-right: 30rpx;
}
.week-day-line {
  width: 100%;
  height: 112rpx;
  justify-content: flex-start;
}
.day-txt {
  color: #07133b;
  text-align: center;
  font-family: 'PingFang SC';
  font-size: 28rpx;
  font-weight: 400;
  text-align: center;
  width: 72rpx;
  line-height: 72rpx;
  height: 72rpx;
  font-weight: 400;
  position: relative;
}
.todayI::after {
  width: 6rpx;
  height: 6rpx;
  border-radius: 3rpx;
  background: #2777ff;
  content: ' ';
  position: absolute;
  bottom: 10rpx !important;
  left: 34rpx;
  display: inline-block;
  z-index: 10;
}
.activeI {
  background: #2777ff14;
  color: #2777ff;
  border-radius: 36rpx;
  position: relative;
}
.next-day {
  color: #07133b66;
}
.middleTxt {
  color: #2777ff;
}
</style>
